<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            img {
                --s: 200px; /* image size */
                --b: 6px; /* border thickness */
                --c: #ae3ec9; /* border color */
                --cb: #e9ecef; /* background color */
                --f: 1; /* initial scale */

                width: var(--s);
                aspect-ratio: 1;
                padding-top: calc(var(--s) / 5);
                cursor: pointer;
                border-radius: 0 0 999px 999px;
                --_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box;
                --_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
                outline: var(--b) solid var(--c);
                outline-offset: var(--_o);
                background: radial-gradient(circle closest-side, var(--cb) calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g);
                -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
                    radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
                transform: scale(var(--f));
                transition: 0.5s;
            }
            img:hover {
                --f: 1.4; /* hover scale */
            }

            body {
                margin: 0;
                min-height: 100vh;
                display: grid;
                place-content: center;
                grid-auto-flow: column;
                gap: 30px;
                background: #e0e4cc;
            }

            .svg{
                --s: 200px; /* image size */
                --b: 6px; /* border thickness */
                --c: #ae3ec9; /* border color */
                --cb: #e9ecef; /* background color */
                --f: 1; /* initial scale */

                width: var(--s);
                height: calc(var(--s) + 40px);
                border-radius: 0 0 999px 999px;
            }
        </style>
    </head>
    <body>
        <img src="./img/h.webp" alt="Ahmed shadeed" style="--c: #efac27; --cb: #bbdeea" />

        <svg version="1.1" class="svg" viewBox="0 0 200 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <linearGradient id="Gradient">
                    <stop offset="0" stop-color="white" stop-opacity="0" />
                    <stop offset="1" stop-color="white" stop-opacity="1" />
                </linearGradient>
                <mask id="Mask">
                    <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
                </mask>
            </defs>
            <image xlink:href="./img/h.webp" width="200" height="200" x="0" y="40"></image>
        </svg>
    </body>
</html>
